@charset "utf-8";
@import "reset";
@import "muban";
@import "_swiper.min.scss";


.first {
    background: #f4f4f4;
    .swiper-container {
        margin-bottom: 14px;
        .swiper-wrapper {
            height: 128px;
            width: 320px;
            .swiper-slide {
                img {
                    width: 100%;
                }
            }
        }
    }
    .radio {
        margin: 0 10px;
        .list_title {
            font-size: 16px;
            color: #000;
            margin-bottom: 11px;
            font-weight: normal;
        }
        .list_container {
            overflow: hidden;
            margin-right: -8px;
            >li {
                float: left;
                width: 50%;
                padding-right: 8px;
                margin-bottom: 10px;
                overflow: hidden;
                .list_main {
                    display: block;
                    background: #fff;
                    .list_media {
                        position: relative;
                        margin-bottom: 5px;
                        &::before {
                            content: "";
                            display: block;
                            padding-top: 100%;
                        }
                        >img {
                            position: absolute;
                            top: 0;
                            left: 0;
                            display: block;
                            width: 100%;
                            z-index: 1;
                        }
                        .listen_count {
                            left: 5px;
                            bottom: 7px;
                            display: block;
                            line-height: 12px;
                            color: #fff;
                            position: absolute;
                            z-index: 10;
                            font-size: 12px;
                        }
                    }
                }
                .list_info {
                    padding: 0 7px 5px;
                    color: #000;
                    >h3 {
                        height: 36px;
                        line-height: 18px;
                        white-space: normal;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: normal;
                        font-size: 14px;
                    }
                    >p {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: normal;
                        font-size: 12px;
                        line-height: 18px;
                    }
                    >h4 {
                        line-height: 21px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: normal;
                        font-size: 14px;
                    }
                }
            }
        }
        .list_more {
            height: 40px;
            line-height: 40px;
            text-align: center;
            >a {
                display: inline-block;
                padding: 0 10px;
                font-size: 14px;
                color: rgba(0, 0, 0, .6);
            }
        }
    }
    footer {
        padding: 15px 0;
        .web {
            text-align: center;
            margin-bottom: 16px;
            >a {
                position: relative;
                display: inline-block;
                padding: 0 15px;
                font-size: 14px;
                height: 14px;
                line-height: 14px;
                color: #000;
            }
        }
        .copyright {
            font-size: 10px;
            text-align: center;
            color: rgba(0, 0, 0, .5);
        }
    }
}



.two{
    background: #F4F4F4;
    padding: 10px;
    .two_{
        >ul{
            >li{
                margin-bottom: 10px;
                .topic_main {
                    display: -webkit-box;
                    background: #fff;
                    .topic_media {
                        position: relative;
                        width: 100px;
                        height: 100px;
                        display: block;
                        text-decoration: none;
                        >img{
                            display: block;
                            width: 100px;
                            height: 100px;
                        }
                        >span{
                            left: 5px;
                            bottom: 7px;
                            line-height: 12px;
                            color: #fff;
                            opacity: .6;
                            font-size: 9px;
                            z-index: 10;
                            position: absolute;
                            display: block;
                        }
                    }
                    .topic_info {
                        position: relative;
                        -webkit-box-flex: 1;
                        display: -webkit-box;
                        -webkit-box-align: center;
                        -webkit-box-pack: center;
                        .topic_cont {
                            -webkit-box-flex: 1;
                            margin: 0 10px 0 15px;
                            >h3{
                                font-weight: normal;
                                font-size: 16px;
                                color: #000;
                                margin-bottom: 5px;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                
                            }
                            >p{
                                font-size: 14px;
                                color: rgba(0,0,0,.5);
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                >span{
                                    color: #000;
                                    margin-left: 8px;
                                    margin-right: 5px;
                                     white-space: nowrap;
                                }
                            }
                        }
                    }
                }
            }
        }
        .list_more {
            height: 40px;
            line-height: 40px;
            text-align: center;
            >a{
                display: inline-block;
                padding: 0 10px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.6);
            }
        }
    }
}
.three{
    .s_frame{
        background: #f4f4f4;
        padding: 10px;
        .f_con{
            background-color: #fff;
            padding: 8px 12px 8px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            i{
                width: 18px;
                font-size: 18px;
                display: block;
                color: rgba(0,0,0,.3);
                margin-left: 5px;
            }
            input[type="search"]{
                font-size: 14px;
                width: 360px;
                height: 100%;
                border: none;
                &::-webkit-input-placeholder{
                   color: rgba(0,0,0,.3);
                   font-size: 14px;
                }
            }
        }
    }
    .hot_keys{
        background: #fff;
        padding: 10px;
        h3{
            color: rgba(0,0,0,.6);
            margin-bottom: 8px;
            font-size: 14px;
        }
        .result_tags{
            font-size: 0;
            .tag_s{
                display: inline-block;
                font-size: 14px;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                color: #000;
                border: 1px solid rgba(0,0,0,.6);
                border-radius: 99px;
                word-break: keep-all;
                margin-bottom: 10px;
                margin-right: 14px;
                &:hover{
                    color: #fc4524;
                    border: 1px solid #fc4524;
                }
            }
            .active{
                color: #fc4524;
                border: 1px solid #fc4524;
            }
        }
    }
}
